<template>
  <div id="allDiv">
    <div id="imgDiv">
      <img :src="newUser.image"
           style="width: 100%;height: 200px;"
           alt="loding">
    </div>
    <div id="infoDiv">
      <font>ID : {{newUser.id}}</font><br>
      <font>用户名：<input type="text"
               id="account"
               v-model="newUser.account">
      </font><br>
      <font>用户分类：
        <el-dropdown id="dropdown"
                     @command="handleCommand">
          <el-button type="primary"
                     size="small"
                     plain
                     id="droBtn">
            {{newUser.role}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="平台">平台</el-dropdown-item>
            <el-dropdown-item command="物管">物管</el-dropdown-item>
            <el-dropdown-item command="商家">商家</el-dropdown-item>
            <el-dropdown-item command="用户">用户</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </font><br>
      <font>用户邮箱：<input type="text"
               id="email"
               v-model="newUser.email">
      </font>
    </div>

    <div id="tableDiv">
      <el-table :data="newUser.userHouseDtoList"
                height="200px"
                border
                style="width: 100%">
        <el-table-column prop="name"
                         label="小区名">
          <template slot-scope="scope">

            <el-dropdown @command="handleCommand2">
              <el-button type="primary"
                         size="small"
                         plain>
                {{scope.row.name}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(name,i) in newUser.communityName"
                                  :key="i"
                                  :command='{row:scope.row,name:name}'>{{name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>
        </el-table-column>
        <el-table-column prop="building"
                         label="栋数">
          <template slot-scope="scope">
            <el-input v-model="scope.row.building"
                      size="mini">{{scope.row.building}}</el-input>
          </template>
        </el-table-column>
        <el-table-column prop="unit"
                         label="单元">
          <template slot-scope="scope">
            <el-input v-model="scope.row.unit"
                      size="mini">{{scope.row.unit}}</el-input>
          </template>
        </el-table-column>
        <el-table-column prop="num"
                         label="门牌">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num"
                      size="mini">{{scope.row.num}}</el-input>
          </template>
        </el-table-column>
        <el-table-column prop="id"
                         label="删除">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="delHouse(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="btnDiv">
      <el-button plain
                 type="info"
                 size="mini"
                 @click="cancel">取消</el-button>
      <el-button plain
                 type="primary"
                 size="mini"
                 @click="commit">确定</el-button>
    </div>

  </div>
</template>
<script>
import axios from '../../../axios_config';
import Commons from '../../../js/commons'
export default {
  props: {
    user: {},//用来接收父组件传过来的数据
  },
  data () {
    return {
      newUser: {}
    }
  },
  mounted () {
    this.newUser = JSON.parse(JSON.stringify(this.user));
  },
  methods: {
    handleCommand (command) {
      console.log(command);
      this.newUser.role = command;
    },
    handleCommand2 (e) {
      e.row.name = e.name;
    },
    delHouse (id) {
      let that = this;
      for (let i = 0; i < that.newUser.userHouseDtoList.length; i++) {
        if (that.newUser.userHouseDtoList[i].id == id) {
          that.newUser.userHouseDtoList.splice(i, 1);
          break;
        }
      }
    },
    cancel () {
      //通知父组件关闭对话框
      this.$emit("closedialog", { result: false, data: {} });
    },
    commit () {
      if (JSON.stringify(this.newUser) == JSON.stringify(this.user)) {
        this.$emit("closedialog", { result: false, data: null });
      } else {
        axios.post("http://192.168.11.18:8080/user/userInfoChange", JSON.stringify(this.newUser), { headers: { 'Content-Type': 'application/json;charset=UTF-8' } }).then(res => {
          if (res.data.state == "SUCCESS") {
            //通知父组件关闭对话框
            this.$emit("closedialog", { result: true, data: this.newUser });
          } else {
            alert(res.data.message);
          }
        });
      }
    }
  },
}
</script>
<style scoped>
#allDiv {
  height: 450px;
}
#imgDiv {
  /* background-color: hotpink; */
  width: 20%;
  height: 220px;
  float: left;
  border: 1px solid gray;
}
#infoDiv {
  /* background-color: rgb(165, 250, 243); */
  width: 55%;
  height: 250px;
  float: left;
  margin-left: 20%;
}
font {
  font-size: 120%;
  margin-left: 5%;
}
#dropdown {
  margin-top: 8%;
}
input {
  outline: none;
  border: 1px solid gray;
  background: rgb(255, 255, 255);
  margin-top: 8%;
  font-size: 100%;
}
#btnDiv {
  position: fixed;
  top: 85%;
  left: 70%;
}
</style>